<template>
  <el-form-item :label="label" :prop="prop" class="item">
      <el-time-picker
          :key="pickerKey"
          style="width: 100%"
          v-model="pickerValue"
          value-format="hh:mm:ss"
          :placeholder="'请选择'+ label"
          @change="changePickerValue"
      >
      </el-time-picker>
  </el-form-item>
</template>

<script setup>
const props = defineProps({
  label: {
      type: String,
      default: ''
  },
  prop: {
      type: String,
      default: ''
  },
  value: {
      type: String,
      default: ''
  }
})

const pickerValue = ref('')
const pickerKey = ref('')
const emit = defineEmits(['on-submit'])

watch(()=>props.value, (newval)=>{
  if(newval){
      pickerKey.value += new Date()
      console.log(newval, 'newvalnewval@@')
      pickerValue.value = newval
  }
},{immediate: true})


const changePickerValue = (data) => {
  console.log(data, 'datadata')
  if(data){
    emit('on-submit', data)
  } else {
    emit('on-submit', '')
  }
}

</script>
<style lang="scss" scoped>
.item {
width: 100%;
.el-form-item__label{
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #6B728A;
}
}
</style>
